<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>tabs jquery</title>
<script type="text/javascript" src="../jQuery/jquery.js"></script>
<style>
.container{width:50%;margin:0 auto;}
ul{list-style:none;height:32px;margin:0px;padding:0px;border-left:1px solid #999;border-bottom:1px solid #999;width:100%;}
ul li{float:left;margin:0px;padding:0px;height:31px;border:1px solid #999;border-left:none;line-height:31px;margin-bottom:-1px;overflow:hidden;position:relative;
background:#e0e0e0;}
li a{display:block;text-decoration:none;padding:0 20px;outline:none;height:31px;border:1px solid #fff;color:#000;}
li a:hover{background:#ccc;}
li.active,li.active a:hover{background:#fff;border-bottom:1px solid #fff;}
.tab_contents{border:1px solid #999;border-top:none;width:100%;overflow:hidden;}
.tab_content{padding:20px;}
</style>
</head>

<body>
<!--REFER:http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/-->
<div class="container">
	<ul><li><a href="#tab1">tab1</a></li><li><a href="#tab2">tab2</a></li><li><a href="#tab3">tab3</a></li><li><a href="#tab4">tab4</a></li></ul>
	<div class="tab_contents">
		<div id="tab1" class="tab_content">
			content of tab1
		</div>
		<div id="tab2" class="tab_content">
			content of tab2
		</div>
		<div id="tab3" class="tab_content">
			content of tab3
		</div>
		<div id="tab4" class="tab_content">
			content of tab4
		</div>
	</div>
</div>
<script>
$(function(){
	$('.tab_content').hide();
	$('ul li:first').addClass('active').show();
	$('.tab_content:first').show();
	$('ul li').click(function(){
		$('ul li').removeClass('active');
		$(this).addClass('active');
		$('.tab_content').hide();
		$($(this).find('a').attr('href')).fadeIn();
		return false;
	});
});
</script>
</body>
</html>
